<template>
  <div class="app-container">
    <div class="balance_box">
      <div class="filter-container">
        <span class="filter-title filter-item" style="margin-right: 8px"
          >用户身份</span
        >
        <k-select
          v-model="listQuery.userRole"
          class="filter-item user-status"
          type="1"
          :select-params="[
            { label: '玩家', value: 2 },
            { label: '主播', value: 3 },
          ]"
          @handleSelectEvent="handleFilter"
        />
        <span v-if="authorityHandle(76)" class="filter-title filter-item"
          >身份所属</span
        >
        <k-select
          v-if="authorityHandle(76)"
          v-model="listQuery.userType"
          class="filter-item"
          :select-params="dict.type.IDENTITY_TYPE"
          @handleSelectEvent="handleFilter"
        />
        <span class="filter-title filter-item">变更来源</span>
        <k-select
          v-model="listQuery.changeType"
          class="filter-item user-status"
          :select-params="[
            { label: '心跳时刻', value: 1 },
            { label: '购卡赠送', value: 2 },
            { label: '佣金', value: 3 },
            { label: 'cdk', value: 4 },
            { label: '欧皇战场消耗', value: 5 },
            { label: '欧皇战场退回', value: 6 },
            { label: '合作补贴', value: 7 },
            { label: 'vip奖励', value: 8 },
            { label: '排行榜', value: 9 }
          ]"
          @handleSelectEvent="handleFilter"
        />
        <span class="filter-title filter-item">变更时间</span>
        <k-date-picker
          v-model="timeValue"
          valueFormat="yyyy-MM-dd HH:mm:ss"
          size="mini"
          @hqchang="handleFilter"
        />
        <div class="Player_se">
          <k-input
            v-model.trim="listQuery.key"
            class="filter-item"
            is-search
            placeholder="请输入关键词"
            :search-fun="handleFilter"
            @keyup.enter.native="handleFilter"
          />
        </div>
      </div>
      <!--表格相关 -->
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="listData"
          border
          fit
          highlight-current-row
          show-summary
          :summary-method="getSummaries"
          style="width: 100%; border-radius: 8px; margin-top: 20px"
          :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
        >
          <el-table-column
            width="80px"
            type="index"
            label="序号"
            align="center"
          />
          <el-table-column
            prop="userName"
            width="150px"
            label="玩家用户名"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="balanceChanged"
            width="120px"
            label="余额变更(F)"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="balanceBefore"
            min-width="120px"
            label="变更前(F)"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="balanceAfter"
            min-width="120px"
            label="变更后(F)"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="changeTypeStr"
            min-width="120px"
            label="变更来源"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="createTime"
            min-width="120px"
            label="变更时间"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>

      <pagination
        v-show="totalRows > 0"
        :total="totalRows"
        :page.sync="listQuery.pager.pageNo"
        :limit.sync="listQuery.pager.pageSize"
        @pagination="loadData"
      />
    </div>
  </div>
</template>
  
  <script>
import Pagination from "@/components/Pagination";
import {
  listUserBalanceData,
  ammoListChangeData,
  listUserBalanceDataSum,
  listChangeDataSum,
} from "@/api/data/data";

export default {
  name: "Balance",
  components: { Pagination },
  dicts: ["IDENTITY_TYPE"],
  data() {
    return {
      timeValue: "",
      listData: [],
      allUserList: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: "",
          start: "",
        },
        sort: "", // 排序字段 为对应列名,
        direction: "", // 排序 正向(asc)逆向(desc),
        userType: undefined, // 身份所属",
        changeType: undefined, // 变更来源,
        startTime: "",
        endTime: "",
        key: "", // 饰品名称'
        userRole: "",
      },
      balanceChanged:0,
    };
  },
  watch: {
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null;
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null;
    },
  },
  async created() {
    this.loadData();
    this.tableDate2()
  },

  methods: {
    tableDate2() {
      this.$nextTick(() => {
        let html5
        html5 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
        .querySelectorAll('td')[2]
        .querySelector('.cell')
        
        html5.innerHTML = `${this.balanceChanged !== '' ? this.balanceChanged : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html5.onclick = () => {
            listUserBalanceDataSum(this.listQuery).then((res) => {
                this.balanceChanged = res.data;
            });
        }
      })
    },
    // 总计
    getSummaries(param) {
      const { columns } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          // 第一列
          sums[index] = "总计";
        } else if (column.property === "balanceChanged") {
          sums[index] = this.balanceChanged;
        }
      });
      return sums;
    },

    loadData() {
      listUserBalanceData(this.listQuery).then((res) => {
        const data = res.data;
        this.allUserList = res.data;
        this.listData = data.rows;
        this.totalRows = data.totalRows;
        if (this.ammoChanged) {
          this.ammoChanged = "";
          this.tableDate2();
        }
      });
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1;
      this.loadData();
    },
  },
};
</script>
  
  <style lang="scss">
.balance_box {
  width: 100%;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  min-height: calc(100vh - 150px);

  .filter-container {
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding-right: 220px;
    box-sizing: border-box;

    .filter-item {
      margin: 0 8px;
    }

    input {
      width: 130px;
      height: 40px;
      line-height: 40px;
    }

    .Player_se {
      position: absolute;
      right: 0;
      top: -4px;

      input {
        width: 220px;
        margin-left: 40px;
        height: 48px;
        line-height: 48px;
      }
    }
  }
}

</style>